<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<base href="${ctx}">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}/commons/css/common.css" />
<script type="text/javascript" src="${ctx}plugins/jquery/jquery-1.7.min.js"></script>
<title>操作详情</title>
<script type="text/javascript">
	window.onload = function(){
		//调整列表高度，当父页面是以iframe嵌套的方式显示的时候，可以采用
// 		var bodyH = parent.document.body.offsetHeight;
// 		parent.$("#iframe").attr("height",bodyH*2/3);
		//设置节点详情的位置
		$("#ul").css("margin-left",(document.body.scrollWidth-628)/2);
		//设置操作详情的位置
		$("#detailDIV").css("top", $("#endNode").offset().top+100);
		//鼠标经过时结果行背景变色
		$(".tb-table>table tr:gt(0)").hover(function() {
			$(this).css("background", "#EEEEEE");
		}, function() {
			$(this).css("background", "");
		});
	};
	function displayInfo(count){
		var node = $("#node_"+count).children();
		$("#nodeIndex").html(node[0].innerHTML);
		$("#userName").html(node[1].innerHTML);
		$("#refNodes").html(node[2].innerHTML);
		$("#memo").html(node[3].innerHTML);
		$("#ul").css("display", "block");
	}
	function seout(){
		$("#ul").css("display", "none");
	}
</script>
<style type="text/css">
	.start{ background:url(${ctx}commons/images/node.png) no-repeat left -99px;}
	.to_as{ background:url(${ctx}commons/images/node.png) no-repeat -973px -99px; width:40px; height:99px; display:block; float:left;}
	.pass{ background:url(${ctx}commons/images/node.png) no-repeat -141px top;}
	.current{ background:url(${ctx}commons/images/node.png) no-repeat -282px top;}
	.wait{ background:url(${ctx}commons/images/node.png) no-repeat -423px top;}
	.end{ background:url(${ctx}commons/images/node.png) no-repeat -705px -99px;}
	.start, .pass, .current, .wait, .end{ width:141px; height:99px; display:block;float: left;}
	.start p, .end p{margin-top: 62px;}
	.pass p, .current p, .wait p{ margin: 12px 9px; color: white; line-height: 17px; font-weight: bold;}
	.ul li{float:left;}
	.lic{ background:url(${ctx}commons/images/node.png) no-repeat -846px top; width:157px; height:99px;}
	.lic p{ margin: 6px 10px 0px 10px;width: 133px;}
</style>
<div align="center" style="position: absolute; z-index: 9999;">
	<ul id="ul" class="ul" style="display: none;">
		<li class="lic"><p>节点序号</p><p id="nodeIndex"></p></li>
		<li class="lic"><p>节点操作人</p><p id="userName"></p></li>
		<li class="lic"><p>参考节点</p><p id="refNodes"></p></li>
		<li class="lic"><p>节点描述</p><p id="memo"></p></li>
	</ul>
</div>
<font size="3" style="color: green;font-weight: bold;">提示：</font><br>
<div style="margin-left: 33px;">
	<font size="2">
	1.如果有等待操作或者受阻的节点时，将以红色框显示。<br>
	2.鼠标放在某个节点上时，可以显示该节点的详细信息。<br>
	</font>
</div>
<c:if test="${instanceModel != null}">
	<h3 class="fn-mt7">${instanceModel.flowName }（流程图）</h3>
	<div align="center" style="padding-top: 15px;margin-top: 0;">
		<ul>
			<c:if test="${instanceModel.nodeList != null }">
				<li class="start"><p><fmt:formatDate value="${instanceModel.gmtStarting}" type="both" /></p></li>
				<c:forEach var="node" items="${instanceModel.nodeList }">
					<li class="to_as"></li>
					<c:choose>
						<c:when test="${fn:substring(instanceModel.nodeStatus, node.nodeIndex-1, node.nodeIndex) eq 'Y' }">
							<li class="pass" onmouseover="displayInfo('${node.nodeIndex}')" onmouseout="seout()"><p>${node.nodeName}</p><p>${node.nodeIndex}</p></li>
						</c:when>
						<c:otherwise>
							<c:choose>
								<c:when test="${fn:contains(instanceModel.currentNodeIndexes, node.nodeIndex)}">
									<li class="current" onmouseover="displayInfo('${node.nodeIndex}')" onmouseout="seout()"><p>${node.nodeName}</p><p>${node.nodeIndex}</p></li>
								</c:when>
								<c:otherwise>
									<li class="wait" onmouseover="displayInfo('${node.nodeIndex}')" onmouseout="seout()"><p>${node.nodeName}</p><p>${node.nodeIndex}</p></li>
								</c:otherwise>
							</c:choose>
						</c:otherwise>
					</c:choose>
					<div id="node_${node.nodeIndex }" style="display: none;">
						<p>${node.nodeIndex}</p>
						<p>
							<c:choose>
								<c:when test="${!empty node.userName}">
									<c:if test="${!empty userMap}">${userMap[node.userName]}</c:if>
								</c:when>
								<c:otherwise>
									<c:if test="${!empty deptMap}">${deptMap[node.deptNo]}</c:if>
									<c:if test="${!empty node.deptNo && !empty node.postNo}"> <font color="brown">并且是</font> </c:if>
									<c:if test="${!empty postMap}">${postMap[node.postNo]}</c:if>
								</c:otherwise>
							</c:choose>
						</p>
						<p>${node.refNodes}</p>
						<p>${node.memo}</p>
					</div>
				</c:forEach>
				<li class="to_as"></li>
				<li id="endNode" class="end"><p><fmt:formatDate value="${instanceModel.gmtCompleted}" type="both" /></p></li>
			</c:if>
		</ul>
	</div>
	<div id="detailDIV" style="position: absolute;width: 100%">
		<h3 class="fn-mt7">
			<span style="float: left; font-size: 14px; font-weight: bold;">操作详情</span>
			<br style="height: 0; clear: both;" />
		</h3>
		<div class="tb-table">
			<table id="tab">
				<thead>
					<tr>
						<th width="30">序 号</th>
						<th>节点名称</th>
						<th>批复</th>
						<th>操作人</th>
						<th>操作时间</th>
					</tr>
				</thead>
				<tbody>
					<c:if test="${instanceModel.nodeList != null }">
						<c:forEach var="node" items="${instanceModel.nodeList }" varStatus="i">
							<tr>
								<td align="center"><c:out value="${i.count }"></c:out></td>
								<td align="center"><c:out value="${node.nodeName }"></c:out></td>
								<td align="center">
									<font face="华文楷体" size="3"
									<c:choose>
										<c:when test="${fn:substring(instanceModel.nodeStatus, i.count-1, i.count) eq 'Y' }">
											color="green"
										</c:when>
										<c:when test="${fn:substring(instanceModel.nodeStatus, i.count-1, i.count) eq 'N' }">
											color="red"
										</c:when>
										<c:otherwise>
											color="#cccccc"
										</c:otherwise>
									</c:choose>
										><c:out value="${fn:split(instanceModel.nodeComments, '|')[i.count-1]}"></c:out>
									</font>
								</td>
								<td align="center">
									<c:if test="${fn:split(instanceModel.nodeHandlers, '|')[i.count-1] != '-' }">
										<font face="华文新魏" size="3">
											<c:out value="${userMap[fn:split(instanceModel.nodeHandlers, '|')[i.count-1]]}"></c:out>
										</font>
									</c:if>
								</td>
								<td align="center">
									<c:if test="${fn:split(instanceModel.nodeGmtOperation,'|')[i.count-1] != '-' }">
										<c:out value="${fn:split(instanceModel.nodeGmtOperation,'|')[i.count-1]}"></c:out>
									</c:if>
								</td>
							</tr>
						</c:forEach>
					</c:if>
				</tbody>
			</table>
		</div>
	</div>
</c:if>